<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>章节删除按钮测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .test-section {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #e4e7ed;
            border-radius: 6px;
        }
        .test-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
        }
        .button-demo {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        .btn {
            padding: 8px 16px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            background: white;
            color: #606266;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
        }
        .btn:hover {
            color: #409eff;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
        }
        .btn-danger {
            color: #f56c6c;
            border-color: #fbc4c4;
            background-color: #fef0f0;
        }
        .btn-danger:hover {
            color: #f56c6c;
            border-color: #f56c6c;
            background-color: #fef0f0;
        }
        .btn-primary {
            color: #409eff;
            border-color: #b3d8ff;
            background-color: #ecf5ff;
        }
        .btn-primary:hover {
            color: #409eff;
            border-color: #409eff;
            background-color: #ecf5ff;
        }
        .table-demo {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        .table-demo th,
        .table-demo td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e4e7ed;
        }
        .table-demo th {
            background-color: #fafafa;
            font-weight: 500;
        }
        .table-demo tr:hover {
            background-color: #f5f7fa;
        }
        .status {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .status-success {
            background-color: #f0f9ff;
            color: #67c23a;
            border: 1px solid #67c23a;
        }
        .code-block {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin: 10px 0;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            overflow-x: auto;
        }
        .highlight {
            background-color: #fff3cd;
            padding: 2px 4px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>章节管理删除按钮测试</h1>
        
        <div class="test-section">
            <div class="test-title">1. 表格行内删除按钮</div>
            <p>每行数据都有独立的删除按钮，位于"操作"列中：</p>
            
            <table class="table-demo">
                <thead>
                    <tr>
                        <th>章节ID</th>
                        <th>章节名称</th>
                        <th>小说ID</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>第一章 开始</td>
                        <td>1</td>
                        <td>2023-10-28 10:30:00</td>
                        <td>
                            <div class="button-demo">
                                <a href="#" class="btn btn-primary">修改</a>
                                <a href="#" class="btn btn-danger">删除</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>第二章 发展</td>
                        <td>1</td>
                        <td>2023-10-28 11:00:00</td>
                        <td>
                            <div class="button-demo">
                                <a href="#" class="btn btn-primary">修改</a>
                                <a href="#" class="btn btn-danger">删除</a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="test-section">
            <div class="test-title">2. 顶部批量删除按钮</div>
            <p>页面顶部有批量删除按钮，只有选中数据时才可用：</p>
            
            <div class="button-demo">
                <a href="#" class="btn btn-primary">新增</a>
                <a href="#" class="btn btn-primary">修改</a>
                <a href="#" class="btn btn-danger">删除</a>
            </div>
            
            <p><strong>注意：</strong>批量删除按钮只有在选中表格数据时才可用（非禁用状态）</p>
        </div>

        <div class="test-section">
            <div class="test-title">3. 删除按钮代码位置</div>
            <p>删除按钮在以下位置定义：</p>
            
            <div class="code-block">
<strong>表格行内删除按钮：</strong>
&lt;el-button
  link
  type="primary"
  icon="Delete"
  @click="handleDelete(scope.row)"
  v-hasPermi="['novel:chapter:remove']"
&gt;删除&lt;/el-button&gt;

<strong>顶部批量删除按钮：</strong>
&lt;el-button
  type="danger"
  plain
  icon="Delete"
  size="mini"
  :disabled="multiple"
  @click="handleDelete"
  v-hasPermi="['novel:chapter:remove']"
&gt;删除&lt;/el-button&gt;
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">4. 可能的问题排查</div>
            <p>如果看不到删除按钮，请检查：</p>
            <ul>
                <li><span class="highlight">权限问题</span>：确保用户有 <code>novel:chapter:remove</code> 权限</li>
                <li><span class="highlight">数据加载</span>：确保表格数据正常加载</li>
                <li><span class="highlight">样式问题</span>：检查CSS样式是否正常</li>
                <li><span class="highlight">控制台错误</span>：打开浏览器开发者工具查看错误信息</li>
            </ul>
        </div>

        <div class="test-section">
            <div class="test-title">5. 测试步骤</div>
            <ol>
                <li>访问章节管理页面：<code>/novel/chapter</code></li>
                <li>检查表格每行是否显示"修改"和"删除"按钮</li>
                <li>检查页面顶部是否有"删除"按钮</li>
                <li>点击删除按钮测试确认对话框</li>
                <li>检查浏览器控制台是否有错误信息</li>
            </ol>
        </div>

        <div class="test-section">
            <div class="test-title">6. 权限配置</div>
            <p>确保在权限管理中配置了以下权限：</p>
            <div class="code-block">
权限标识：novel:chapter:remove
权限名称：章节删除
权限描述：允许删除章节数据
            </div>
        </div>
    </div>

    <script>
        // 模拟删除按钮点击事件
        document.addEventListener('DOMContentLoaded', function() {
            const deleteButtons = document.querySelectorAll('.btn-danger');
            deleteButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (confirm('确定要删除这个章节吗？删除后无法恢复！')) {
                        alert('删除成功！');
                    }
                });
            });
        });
    </script>
</body>
</html>

